<template>
    <div id="MyIndex-Middle-ChildNav">
        <div id="MyIndex-Middle-ChildNav-Content">

                <van-tabs v-model="active" @click="onClick" title-active-color="#0f0f0f" title-inactive-color="#838383">
                    <van-tab :title="'动态'" title-class="t">
                        <MyIndexMiddleDetail></MyIndexMiddleDetail>
                    </van-tab>
                    <van-tab :title="'回答'+0" title-class="t">
                        <MyIndexMiddleDetail></MyIndexMiddleDetail>
                    </van-tab>
                    <van-tab :title="'视频'+0" title-class="t">
                        <MyIndexMiddleDetail></MyIndexMiddleDetail>
                    </van-tab>
                    <van-tab :title="'想法'+0" title-class="t">
                        <MyIndexMiddleDetail></MyIndexMiddleDetail>
                    </van-tab>
                    <van-tab :title="'文章'+0" title-class="t">
                        <MyIndexMiddleDetail></MyIndexMiddleDetail>
                    </van-tab>
                    <van-tab :title="'专栏'+0" title-class="t">
                        <MyIndexMiddleDetail></MyIndexMiddleDetail>
                    </van-tab>
                    <van-tab :title="'Live讲座'+0" title-class="t">
                        <MyIndexMiddleDetail></MyIndexMiddleDetail>
                    </van-tab>
                    <van-tab :title="'更多'" title-class="t">
                        <MyIndexMiddleDetail></MyIndexMiddleDetail>
                    </van-tab>
                </van-tabs>

        </div>
    </div>
</template>

<script>

    // import { Toast } from 'vant';//Toast:页面弹框
    import MyIndexMiddleDetail from 'com/My/MyIndex/MyIndex-Middle-detail.vue'
    export default {
        name: "MyIndex-Middle-ChildNav",
        components:{
            MyIndexMiddleDetail
        },
        data() {
            return {
                active:0,
            };
        },
        methods: {
            onClick(name, title) {
                // Toast(title);
                //name:表示序号
                //title:内容
                console.log(name+"----"+title);
                this.$store.state.MyIndex.content=this.$store.state.MyIndex.MyIndexDetail[name];
            },
        },
    }
</script>

<style lang="scss" >
    #MyIndex-Middle-ChildNav{
        width: 100%;
        background-color: #FFFFFF;
        position: sticky;
        top: 0.51rem;

        #MyIndex-Middle-ChildNav-Content{
            border-top: 0.02rem solid #f3f3f3;
            width: 100%;
            position: relative;

            .van-tabs--line .van-tabs__wrap{
                height: 0.6rem;

                .t{
                    font-weight: bold;
                    font-size: 0.15rem;
                }

                .van-tabs__line{
                    background-color: #0081f4;
                    height: 0.04rem;
                }
            }
        }

    }
</style>